<?php
session_start();
include 'conn.php';
// 获取URL参数中的id和uid
$goods_id = isset($_REQUEST['id']) ? $_REQUEST['id'] : null;

?>
   <!DOCTYPE>
   <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>商品</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style>
      /* 评论区域样式 */
      .comment-area {
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          width: 1100px;
          margin: 0 auto;
          background: linear-gradient(135deg, #f8f9fa, #e9ecef);
          border-radius: 12px;
          border: 2px solid #44f;
          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
          padding: 24px;
          transition: box-shadow 0.3s, border-color 0.3s;
      }
  
      .comment-area:hover {
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
          border-color: #0056b3;
      }
  
      .comment-list {
          flex: 1;
          margin-right: 24px;
          border-right: 1px solid #eee; /* 中间竖线 */
          padding-right: 24px;
      }
  
      .comment-item {
          margin-bottom: 24px;
          border-bottom: 1px solid #eee;
          padding-bottom: 12px;
          transition: border-color 0.3s, background-color 0.3s;
      }
  
      .comment-item:hover {
          border-color: #0056b3;
          background-color: #f1f1f1;
      }
  
      .comment-item:last-child {
          border-bottom: none;
          padding-bottom: 0;
      }
  
      .comment-user {
          font-weight: bold;
          color: #333;
          font-size: 16px;
          transition: color 0.3s;
      }
  
      .comment-user:hover {
          color: #0056b3;
      }
  
      .comment-date {
          color: #999;
          font-size: 12px;
          margin-top: 5px;
          transition: color 0.3s;
      }
  
      .comment-date:hover {
          color: #666;
      }
  
      .comment-content {
          margin-top: 10px;
          color: #333;
          font-size: 14px;
          transition: color 0.3s;
      }
  
      .comment-content:hover {
          color: #555;
      }
  
      .comment-meta {
          font-size: 12px;
          color: #666;
          margin-top: 5px;
          transition: color 0.3s;
      }
  
      .comment-meta:hover {
          color: #333;
      }
  
      .comment-section {
          flex: 1;
      }
  
      .comment-section h3 {
          font-size: 22px;
          margin-bottom: 16px;
          color: #333;
          transition: color 0.3s;
      }
  
      .comment-section h3:hover {
          color: #0056b3;
      }
  
      .comment-section textarea {
          width: 100%;
          height: 120px;
          padding: 12px;
          border: 1px solid #ccc;
          border-radius: 8px;
          resize: none;
          margin-bottom: 16px;
          font-size: 14px;
          transition: border-color 0.3s, background-color 0.3s;
      }
  
      .comment-section textarea:focus {
          border-color: #0056b3;
          background-color: #f1f1f1;
      }
  
      .comment-section button {
          padding: 12px 24px;
          border: none;
          border-radius: 8px;
          background: linear-gradient(135deg, #1369C0, #0056b3);
          color: #fff;
          cursor: pointer;
          transition: background 0.3s, box-shadow 0.3s;
          font-size: 14px;
      }
  
      .comment-section button:hover {
          background: linear-gradient(135deg, #0056b3, #1369C0);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
  
      /* 响应式布局 */
      @media (max-width: 768px) {
          .comment-area {
              flex-direction: column;
          }
  
          .comment-list {
              margin-right: 0;
              margin-bottom: 24px;
              border-right: none;
              padding-right: 0;
          }
  
          .comment-section {
              width: 100%;
          }
      }
  </style>
   <link rel="stylesheet" type="text/css" href="./css/general.css">
   <link rel="stylesheet" type="text/css" href="./css/goods.css">
   <script type="text/javascript" src="./js/jquery.js"></script>
   <script type="text/javascript" src="./js/jquery.zoom.min.js"></script>
   <script type="text/javascript" src="./js/general.js"></script>
   <script type="text/javascript" src="./js/goods.js"></script>
   </head>
   <body>

	<!-- 头部开始 -->
	<?php include 'header.php'; ?>
	   <!-- 头部结束 -->
   <?php
   $sql = "select * from goods where id = '".$goods_id."'";

     $result = $conn->query($sql);

     if ($result->num_rows > 0) {
         // 输出每行数据
         while($row = $result->fetch_assoc()) {

             ?>
   <!-- 主体开始 -->
   <div class="container w1100 mt10">
       <div class="gtds cut" style="display: flex;">
           <div class="gimbox fl" style="width: 50%;">
               <!-- 商品图片开始 -->
               <div class="module">
                   <div class="im cut" style="position: relative; width:300px; height:300px; border-radius:20%; overflow: hidden;">
                       <div id="goods-imgarea" style="position: relative; overflow: hidden;">
                           <img src="<?php echo $row['picture']?>" width="450px" style="transition: transform 0.3s;">
                       </div>
                       <i class="zoom icon" style="position: absolute; bottom: 10px; right: 10px; font-size: 24px; color: #fff; background-color: rgba(0, 0, 0, 0.5); padding: 5px; border-radius: 50%; cursor: pointer;"></i>
                   </div>
                   <div class="tmb mt10 cut" style="display: flex; align-items: center;">
                       <a class="tmb-arrow lh disabled" id="tmb-back-btn" style="cursor: pointer; padding: 10px; background-color: #f1f1f1; border-radius: 4px;"><i class="icon">&lt;</i></a>
                       <div class="tmb-im cut" style="flex: 1; display: flex; justify-content: center; align-items: center;">
                           <!-- 可以在这里添加缩略图 -->
                       </div>
                       <a class="tmb-arrow rh disabled" id="tmb-forward-btn" style="cursor: pointer; padding: 10px; background-color: #f1f1f1; border-radius: 4px;"><i class="icon">&gt;</i></a>
                   </div>
               </div>
               <!-- 商品图片结束 -->
           </div>
           <div class="gtbox cut" style="width: 50%; padding-left: 20px; position: relative;">
               <div class="divider" style="height: 100%; border-left: 1px solid #e0e0e0; position: absolute; left: 0; top: 0;"></div>
               <div class="content" style="padding-left: 20px;">
                   <h1 style="font-size: 24px; color: #333; margin: 0;">商品详情</h1>
                   <p style="font-size: 50px; color: #333; margin: 8px 0;">
                       <?php echo $row['goods_name']; ?>
                   </p>
                   <div class="gatt module mt10 cut" style="font-size: 18px;">
                       <dl>
                           <dt style="font-weight: bold; color: #333; margin-right: 10px;">商品ID:</dt>
                           <dd style="color: #555;">
                               <?php echo $row['id']; ?>
                           </dd>
                       </dl>
                       <dl class="mt5">
                           <dt style="font-weight: bold; color: #333; margin-right: 10px;">原价:</dt>
                           <dd class="npri" style="color: #999;">
                               <del><i>¥</i><font id="nowprice" data-price="89.00">
                                   <?php echo $row['old_price']; ?>
                               </font></del>
                           </dd>
                       </dl>
                       <dl class="mt5">
                           <dt style="font-weight: bold; color: #333; margin-right: 10px;">现价:</dt>
                           <dd class="npri" style="color: #ff4500;">
                               <i>¥</i><font id="nowprice" data-price="89.00">
                                   <?php echo $row['price']; ?>
                               </font>
                           </dd>
                       </dl>
                       <dl>
                           <dt style="font-weight: bold; color: #333; margin-right: 10px;">详细:</dt>
                           <dd style="color: #555;">
                               <?php echo $row['description']; ?>
                           </dd>
                       </dl>
                   </div>
				   <?php
				        }
				    } else {
				        echo "0 个结果";
				    }
				   ?>
                   <div class="cutline mt10" style="border-top: 1px solid #e0e0e0; margin-top: 10px;"></div>
                   <div class="gatt module" style="margin-top: 10px;">
                       <form method="post" action="user/buy.php?gid=<?php echo $goods_id?>&uid=<?php echo $uid?>" id="buy-form">
                           <dl class="mt15" style="display: flex; align-items: center; margin-top: 15px;">
                               <dt style="font-weight: bold; color: #333; margin-right: 10px;">数:</dt>
                               <dd style="display: flex; align-items: center;">
                                   <input name="count" id="count" type="text" style="padding: 5px; border: 1px solid #ccc; border-radius: 4px; margin-right: 5px;">
                                   <font class="c999 ml5" style="color: #999; margin-right: 5px;">件</font>
                               </dd>
                           </dl>
						   <br />
                           <input type="submit" value="立即购买" style="border: none; border-radius: 4px; background-color: #007BFF; color: #fff; cursor: pointer; font-size: 18px; transition: background-color 0.3s; margin-right: 10px;">
                           <button id="addcart" name="addcart" type="button" style="border: none; border-radius: 4px; background-color: #28A745; color: #fff; cursor: pointer; font-size: 18px; transition: background-color 0.3s; margin-right: 10px;">加入购物车</button>
                           <button id="addCollect" name="collect" type="button" style="border: none; border-radius: 4px; background-color: #17A2B8; color: #fff; cursor: pointer; font-size: 18px; transition: background-color 0.3s; margin-right: 10px;">收藏</button>
                           <button id="addLike" class="liked" name="like" type="button" style="border: none; border-radius: 4px; background-color: #DC3545; color: #fff; cursor: pointer; font-size: 18px; transition: background-color 0.3s;">
                               <i class="icon icon-heart" style="margin-right: 5px;"></i> 点赞
                           </button>
                       </form>
                   </div>
               </div>
           </div>
       </div>
   </div>
   <div style="margin-top:100px"></div>
   <div  class="comment-area">
	   <!-- 评论列表 -->
	   <div class="comment-list"></div>
	   
	   <!-- 评论区域开始 -->
	   <div class="comment-section">
		   <h3>发表评论</h3>
		   <form accept-charset="UTF-8" id="commentForm">
			   <textarea name="content" id="commentContent" placeholder="写下你的评论..."></textarea>
			   <button id="addContent" type="button">提交评论</button>
		   </form>
	   </div>
	   <!-- 评论区域结束 -->
   </div>
   <?php include 'footer.php'; ?>
   

   </body>




<script type="text/javascript">
$(function(){
	// 添加历史情况
	addBrowseHistory();
	loadComments();
  $('#addcart').click(function(){
    location.href ="user/addcart.php?uid=<?php echo $uid?>&gid=<?php echo $goods_id?>&count="+$('#count').val();
  });
  
 $('#addCollect').click(function(){
   location.href ="user/addCollect.php?uid=<?php echo $uid?>&gid=<?php echo $goods_id?>";
 });
 
 $('#addLike').click(function(){
	
   /**
	*  location.href ="user/addLike.php?uid=<?php echo $uid?>&gid=<?php echo $goods_id?>";
	*/ 
   var uid = '<?php echo $uid ?>';
   var gid = '<?php echo $goods_id ?>';
   
   $.ajax({
	   url: 'user/addLike.php',
	   type: 'POST',
	   data: {
			uid: '<?php echo $uid?>', // 用户ID
			gid: '<?php echo $goods_id?>' // 商品ID
	   },
		dataType: 'json', // 期望从服务器返回的数据类型
	   success: function(response) {
		   console.log("111",response);
		    // 检查response对象是否有message和status属性
			if (response && typeof response === 'object' && 'message' in response && 'status' in response) {
				if (response.message === '点赞成功' && response.status === 'liked') {
					// $('#addLike').text("已经点赞");
					$('#addLike').addClass('liked');
					$('#addLike .fas.fa-heart').css('color', 'red');
					$('#addLike').text("已经点赞");
					// alert(response.message);
				} else if (response.message === '取消点赞成功' && response.status === 'cancelled') {
					// $('#addLike').text('已取消点赞');
					$('#addLike').removeClass('liked');
					$('#addLike .fas.fa-heart').css('color', 'black');
					$('#addLike').text('已经取消');
					// alert(response.message);
				}
			} else {
				console.log("Unexpected response format: ", response);
			}
	   },
	   error: function() {
		   alert('请求失败，请稍后再试。');
	   }
   });
   
 });
 
  $('#addContent').click(function() {
	  console.log("111");
	   var content = $('#commentContent').val();
	   console.log("评论内容" + content);
	  location.href ="user/addComment.php?uid=<?php echo $uid?>&gid=<?php echo $goods_id?>&content="+encodeURIComponent(content);
    });
  
});
function addBrowseHistory() {
  $.ajax({
    url: 'user/addHistory.php', // 这是处理添加浏览历史的 PHP 脚本
    type: 'POST',
    data: {
      uid: '<?php echo $uid?>', // 用户ID
      gid: '<?php echo $goods_id?>' // 商品ID
    },
    success: function(response) {
      // 处理成功响应，例如可以在这里显示一个提示信息
      console.log('浏览历史添加成功');
    },
    error: function(xhr, status, error) {
      // 处理错误响应
      console.error('添加浏览历史失败', error);
    }
  });
}
// 加载评论
function loadComments() {
    console.log("评论");
    $.ajax({
        type: "POST",
        url: "user/showComment.php",
        data: {
            uid: '<?php echo $uid?>', // 用户ID
            gid: '<?php echo $goods_id?>' // 商品ID
        },
        dataType: "json", // 期望从服务器返回的数据类型
        success: function(data) {
            console.log("评论:", data);
            if (Array.isArray(data)) {
                var commentsHtml = '<h3>评论列表</h3><ul>';
                $.each(data, function(index, comment) {
                    commentsHtml += '<li>' +
                        '<div class="comment-content">' + comment.content + '</div>' +
                        '<div class="comment-meta">商品ID: ' + comment.good_id + ' - 用户ID: ' + comment.user_id + '-评论时间:'  + comment.create_time + '-评论者：' + comment.creator + '</div>' +
                    '</li>';
                });
                commentsHtml += '</ul>';
                $('.comment-list').html(commentsHtml);
            } else {
                // 处理错误信息
                $('.comment-list').html("<p>" + data.error + "</p>");
            }
        },
        error: function(xhr, status, error) {
            console.log('加载评论失败');
        }
    });
}

</script>

